import React, { useState, useEffect } from 'react';
import { message } from 'antd';
import { getList, postList } from '../../api/index'

const Couse = () => {
  const [data, setData] = useState([])
  //总计
  let [amount, setamount] = useState(0)
  function getData() {
    getList('getshopCar').then((res) => {
      setData(res.data.list)
    })
  }

  function amountNum() {
    let data1 =[...data]
    let amounts = data1.reduce((p, n) => {
      if(n.ischeck){
        return p + n.num * n.prive
      }
      return p;
    }, 0)
    setamount(amounts)
  }
  useEffect(() => {
    amountNum()
    getData()
  }, [])


  const [allSelected, setAllSelected] = useState(false);
  const [checkedInvert, setCheckedInvert] = useState(false);
  //全选
  const checkAll = (e) => {
    data.map((item, index) => {
      return item.ischeck = !allSelected;
    })
    setAllSelected(!allSelected)
    setCheckedInvert(allSelected)
    setData(data)
    amountNum()

  }
  //反选
  const fancheckAll = () => {
    data.map((item, index) => {
      return item.ischeck = !item.ischeck;
    })

    const ischeckAll = data.every((item, index) => {
      return item.ischeck;
    })
    setAllSelected(ischeckAll)
    setCheckedInvert(!ischeckAll)
    setData(data)
    amountNum()

  }

  //单个选中
  const chkedOn = (e, id) => {
    const data1 = [...data]
    let ids = data.findIndex((item) => item._id == id)
    data1[ids].ischeck = !data1[ids].ischeck

    setData(data1)

    const ischeckAll = data.every((item, index) => {
      return item.ischeck;
    })
    let ischeckedInvert = ischeckAll ? false : checkedInvert;
    setAllSelected(ischeckAll)
    setCheckedInvert(ischeckedInvert)
    amountNum()
  }
  //加
  let [subtotal, setsubtotal] = useState(0)

  const addClick = (i) => {
    let index_a = ++data[i].num;
    let adddata = [...data]
    adddata[i].num = index_a
    setData(adddata)
    amountNum()
  }

  //减
  const remoClick = (i) => {
    let adddata = [...data]
    if (adddata[i].num > 1) {
      let index_a = --data[i].num;
      adddata[i].num = index_a
      setData(adddata)
      amountNum()
    } else {
      message.open({
        type: 'warning',
        content: '到底了。。。',
      });
    }

  }

  //删除
  const delBtn=(item)=>{
    if(item.ischeck){
        let id= item._id
        postList('/delshopCar',{id:id}).then((res)=>{
          console.log(res);
          if(res.data.code===200){
            message.open({
              type: 'success',
              content: res.data.msg,
            });
            getData()
          }
        })
       
    }else{
      message.open({
        type: 'warning',
        content: '请选中后操作。。。',
      });
    }
  }


  return (
    <div className="couseWarp">
      <table style={{ tableLayout: 'fixed', width: '700px', padding: '20px' }}>
        <tbody>
          {
            data.map((item, i) => {
              return <tr key={item._id}>
                <td>
                  <input type="checkbox" checked={item.ischeck} onChange={(e) => chkedOn(e, item._id)} />
                </td>
                <td style={{ width: '30px' }}>{i}</td>
                <td>{item.name}</td>
                <td>{item.time}</td>
                <td>{item.prive}</td>
                <td>
                  <div style={{ width: "100%", display: 'flex', alignItems: 'center' }}>
                    <p style={{
                      fontSize: '20px', marginRight: '10px', cursor: "pointer"
                    }} onClick={() => addClick(i)}>+</p>
                    <span
                      style={{
                        width: '20px', height: "20px",
                        lineHeight: '20px', textAlign: 'center', background: 'red'
                      }}>{item.num}</span>
                    <p style={{ fontSize: '20px', marginLeft: '10px', cursor: "pointer" }} onClick={() => remoClick(i)}>-</p>

                  </div>
                </td>
                <td style={{ width: "100px", padding: "0,20px" }}>
                  <p>小计：{item.num * item.prive}元</p>
                </td>
                <td>
                  <button onClick={()=>{delBtn(item)}}>删除</button>
                </td>

              </tr>
            })
          }
        </tbody>
        <tfoot>
          <tr>
            <td>
              <span>总计：{amount} 元</span>
            </td>
          </tr>
        </tfoot>
      </table>
      <div className="footer">
        <label htmlFor="quan">全选</label>
        <input type="checkbox" checked={allSelected} onChange={checkAll} className='quan' />
        <label htmlFor="fan">反选</label>
        <input type="checkbox" onChange={fancheckAll} checked={checkedInvert} className='fan' />
      </div>

    </div>
  )
}
export default Couse;